<template>
  <!-- 试卷中展示已经选中的题目 -->

  <div v-show="questions && questions.length != 0" class="questionItems">
    <el-button
      v-show="showRemoveAll"
      class="mr10"
      plain
      size="mini"
      type="primary"
      @click="removeAll"
      >清空</el-button
    >
    <el-link class="mr10" :underline="false">
      数量：{{ questions ? questions.length : 0 }}
    </el-link>

    <el-link :underline="false">
      总分：{{ exam.questions.length > 0 ? questionsScore : score }} 
    </el-link>

    <div class="item" v-for="(item, index) in questions" :key="item.questionId">
      <div class="item-title">
        <i
          v-show="showRemoveQuestion"
          style="color: #f56c6c"
          @click="removeQuestion(item.questionId)"
          class="el-icon-delete"
        ></i>
        <span v-html="'题目' + (index + 1) + ' : ' + item.questionTitle">
        </span>
        <span class="score">分数:{{ item.questionScore }}</span>
      </div>

      <div
        class="item-content"
        v-for="v in JSON.parse(item.questionItems)"
        :key="v.prefix"
      >
        <div class="item-content-tag">
          {{ v.prefix }}
        </div>
        <div class="item-content-content">
          <span v-html="v.content"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "showQuestion",
  props: {
    questions: {
      type: Array,
    },
    showRemoveQuestion: {
      type: Boolean,
      default: true,
    },
    showRemoveAll: {
      type: Boolean,
      default: true,
    },
    //  当详情展示时，实际该展示是这个数据
    score: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["exam"]),
    // 在创建试卷时，题目分数
    questionsScore: function () {
      return this.$store.state.questions.questionsScore;
    },
  },
  created() {
    console.log(this.exam);
  },
  mounted() {},
  methods: {
    ...mapActions(["delQuestionsById", "delAllQuestions", "getQuestionScore"]),
    removeAll() {
      // vuex去清理，而不是组件
      this.delAllQuestions();
    },

    removeQuestion(i) {
      let _this = this;
      this.$modal
        .confirm("是否确认删除该题目")
        .then(function () {
          _this.delQuestionsById(i);
          _this.getQuestionScore();
        })
        .catch(() => {});
    },
  },
};
</script>
 <style scoped  lang="scss">
.questionItems {
  margin-top: 20px;
  padding-top: 5px;
  max-height: 45vh;
  overflow-y: auto;
  .item {
    margin: 10px 50px;
    .item-title {
      /*   display: flex;
      justify-content: start;
      align-items: center; */
      i {
        margin-right: 30px;
      }
      .score {
        margin-left: 20px;
      }
    }

    .item-content {
      margin: 10px 50px;
      display: flex;
      align-items: center;
      .item-content-tag {
        // background-color: #ecf5ff;
        background-color: #f4f4f5;
        display: inline-block;
        padding: 0 10px;
        line-height: 30px;
        font-size: 12px;
        color: #409eff;
        border: 1px solid #d9ecff;
        border-radius: 4px;
        box-sizing: border-box;
      }
      .item-content-content {
        margin-left: 10px;
        // background-color: #ecf5ff;
        // background-color: #f4f4f5;
        display: inline-block;
        padding: 0 10px;
        line-height: 30px;
        font-size: 12px;
        // color: #409eff;
        // border: 1px solid #d9ecff;
        // border-radius: 4px;
        box-sizing: border-box;
      }
    }
  }
}
</style>  